<template>
  <div>
    <!-- <h2>主页</h2> -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="margintop20">
      <el-col>
        <el-carousel :interval="4000" type="card" width="400px" height="300px">
          <el-carousel-item v-for="(item,i) in banner" :key="i">
            <div class="mydiv">
              <img :src="item.imgUrl" width="100%" height="300px" alt />
              <!-- <h4 class="text">{{item.text}}</h4> -->
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <!-- <Calendar class="cal" /> -->

    <div class="move" style="width:280px;">
      <Aplayer :music="videoUpload.music"></Aplayer>
    </div>
    <Video/>
  </div>
</template>

<script>
import { gethomebanner } from "@/api";
import Calendar from "vue-calendar-component";
// import { component } from 'vue/types/umd';
import Aplayer from "vue-aplayer";
import Video from "@/components/video"
import {mapState,mapMutations} from "vuex"
export default {
  components: {
    Calendar,
    Aplayer,
    Video
  },
  computed:{
    ...mapState(['banner'])
  },
  methods:{
    // ...mapMutations(['changeBanner']),
    ...mapMutations(['changeBanner'])  // this.changeBanner = store.commit('changeBanner')
  },
  data() {
    return {
      // banner: [],
      rili:null,
      videoUpload: {
        //progress: false,
        // progressPercent: 0,
        // successPercent: 0,
        theme: "#ffc0cb",
        autoplay: true,
        repeat: "repeat-one", // 轮播模式。值可以是 'repeat-one'（单曲循环）'repeat-all'（列表循环）或者 'no-repeat'（不循环）。为了好记，还可以使用对应的 'music' 'list' 'none'
        mini: true, // 迷你模式
        float: true, // 浮动模式。你可以在页面上随意拖放你的播放器
        music: {
          // 当前播放的音乐
          title: "Tuesday",
          author: "Danelle Sandoval",
          url: 'https://assets.smallsunnyfox.com/music/1.mp3',
          // url:
            // "https://webfs.yun.kugou.com/202009131409/2c6d63dbd4348e8da3197929d0468a71/G178/M09/0E/10/8g0DAF2fFZ6AVYlUADpjHCpHeoY778.mp3",
          // url:
          //   "https://webfs.yun.kugou.com/202009131415/0c0c3a53c8cf210c1ae4283503a8129f/part/0/961034/G104/M06/19/11/qA0DAFvliCWAUNrwADhUKsyRxrU760.mp3",


            


          pic:
            "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2366432289,1795558543&fm=26&gp=0.jpg", // 封面图片



        },
      },
    };
  },
  mounted() {
    if(!this.banner){
      gethomebanner().then((res) => {
      if (res.type) {
        // this.banner = res.result;
        this.changeBanner(res.result)
      }
    });
    }
  },
};
</script>






<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.myswiper {
  width: 100%;
  .mydiv {
    width: 100%;
    position: relative;
    // height:300px;
    img {
      width: 100%;
      height: 500px;
    }
    .text {
      position: absolute;
      width: 100%;
      // height: 300px;
      top: 0;
      left: 0;
      font-size: 50px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.cal {
  position: fixed;
  right: 5px;
  bottom: 5px;
  z-index: 1000;
  width: 300px;
}
.move{
  position: fixed;
  // top:0;
  left:5px;
  bottom: 5px;
  z-index: 999;
  height: 70px;
}
</style>